import { AiPlanListItem, getAllAiStudyList } from '@/api/AiStatisticApi';
import { PlanStatisticsSearchParams } from '@/api/StatisticsApi';
import { Button, Space } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import type { YmColumnsType } from 'ym-design';
import { YmTable } from 'ym-design';
import { PersonStudyDetailModal, PersonStudyTableProps } from './PersonStudyDetail';

type SearchValue = Partial<PlanStatisticsSearchParams>;
type TableRecord = AiPlanListItem;

export default function PlanTable() {
  const navigator = useNavigate();
  //人员明细
  const personStudyRef = useRef<any>();
  const [planItem, setPlanItem] = useState<PersonStudyTableProps>({
    finishState: undefined,
    aiPlanId: undefined,
    aiCycleId: undefined,
  });
  const [refreshFlag, _setRefreshFlag] = useState(false);
  const [columns, setColumns] = useState<YmColumnsType<TableRecord>>();
  // 刷新table的 flag
  function refreshTable() {
    _setRefreshFlag((v) => !v);
  }
  useEffect(() => {
    const columnsData: YmColumnsType<TableRecord> = [
      {
        title: '编号',
        dataIndex: 'No',
        key: 'No',
        width: 80,
        render(value) {
          return value < 10 ? '0' + value : value;
        },
      },
      {
        title: '计划名称',
        dataIndex: 'title',
        key: 'title',
        width: 220,
        ellipsis: true,
      },
      {
        title: '学习时间',
        dataIndex: 'startTime',
        key: 'startTime',
        width: 250,
        render: (text, record) => (
          <span>{record.startTime && record.endTime ? record.startTime + '至' + record.endTime : '--'} </span>
        ),
      },
      {
        title: '应学人数（人）',
        dataIndex: 'allPersonNum',
        key: 'allPersonNum',
        width: 115,
      },
      {
        title: '已学人数（人）',
        dataIndex: 'studyPersonNum',
        key: 'studyPersonNum',
        width: 115,
      },
      {
        title: '未学人数（人）',
        dataIndex: 'noStudyPersonNum',
        key: 'noStudyPersonNum',
        width: 115,
        render: (text, record) => (
          <Button
            type="text"
            size="small"
            onClick={(e: React.MouseEvent) => {
              e.stopPropagation();
              setPlanItem({
                finishState: 2,
                aiPlanId: record.aiPlanId,
                aiCycleId: record.aiCycleId,
              });
              personStudyRef.current?.showModal();
            }}
          >
            <span className="safe-edu_table_operation_text">{text || 0}</span>
          </Button>
        ),
      },
      {
        title: '已学率（%）',
        dataIndex: 'studyRatio',
        key: 'studyRatio',
        width: 100,
      },
      {
        title: '操作',
        key: 'action',
        width: 100,
        fixed: 'right',
        render: (text, record) => {
          return (
            <Space direction="horizontal" size={0}>
              <Button
                type="text"
                size="small"
                onClick={(e: React.MouseEvent) => {
                  navigator(
                    '/entPersonStudy?aiPlanId=' +
                      record.aiPlanId +
                      '&aiCycleId=' +
                      record.aiCycleId +
                      '&studyObject=' +
                      record.studyObject,
                  );
                }}
              >
                <span className="safe-edu_table_operation_text">详情</span>
              </Button>
            </Space>
          );
        },
      },
    ];
    setColumns(columnsData);
    refreshTable();
  }, []);

  return (
    <>
      <div className="plan-learn-table" style={{ height: '700px' }}>
        {columns ? (
          <YmTable<TableRecord, SearchValue>
            rowKey="aiPlanId"
            columns={columns}
            toolBar={false}
            request={async ({ page }) => {
              const result = await getAllAiStudyList(page?.pageIndex, page?.pageSize);
              return result;
            }}
            requestOptions={{
              reFreshDep: [refreshFlag],
            }}
          />
        ) : null}
      </div>
      <PersonStudyDetailModal props={planItem} innerRef={personStudyRef} onChange={() => {}}></PersonStudyDetailModal>
    </>
  );
}
